import React, { Component } from "react";

class Field extends Component {
  render() {
    return (
      <div>
        {this.props.title}
        <input
          type={this.props.type}
          value={this.props.val ?? ""}
          onChange={(e) => {
            this.props.event(e.target.value);
          }}
        />
      </div>
    );
  }
}

export default class App extends Component {
  state = {
    username: localStorage.getItem("username") ?? "",
    password: "",
  };
  handleClick = () => {
    console.log(this.state.username, this.state.password);
    this.setState({
      username: localStorage.setItem("username", this.state.username),
    });
  };
  render() {
    return (
      <div>
        <Field
          type="text"
          title="用户名"
          val={this.state.username}
          event={(val) => {
            this.setState({
              username: val,
            });
          }}
        />
        <Field
          type="password"
          title="密码"
          val={this.state.password}
          event={(val) => {
            this.setState({
              password: val,
            });
          }}
        />
        <button
          onClick={() => {
            this.handleClick();
          }}
        >
          登陆
        </button>
        <button
          onClick={() => {
            this.setState({
              username: "",
              password: "",
            });
          }}
        >
          取消
        </button>
      </div>
    );
  }
}
